<template>
    <view class="main_view" :style="{ backgroundImage: `url('${counterStore.bg_img}')` }">
        <view class="img_and_msg">
            <img class="ai_img" src="https://img1.baidu.com/it/u=1993924537,3763264131&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            <view class="msg_view">以下为你的牌意解析：</view>
        </view>
        <view class="img_and_msg item_top_jg">
            <view class="ai_img"></view>
            <view class="msg_view">
                <img class="user_img" v-for="(item,index) in tu_list" :key="index" :src="item.image" alt="">
            </view>
        </view>
        <view class="img_and_msg item_top_jg">
            <img class="ai_img" src="https://img1.baidu.com/it/u=1993924537,3763264131&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            <view class="msg_view">
                <view style="text-align: center;">
                    <img v-for="(item,index) in tu_list" :key="index" class="ai_user_img" :src="item.image" alt="">
                </view>
                <view>{{ ai_str }}</view>
            </view>
        </view>
        <view class="img_and_msg item_top_jg">
            <img class="ai_img" src="https://img1.baidu.com/it/u=1993924537,3763264131&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            <view class="msg_view">以上就是你的全部解析了~祝你生活愉快，谢谢！</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import {useCounterStore} from '@/store/counter'
const counterStore = useCounterStore() 

const tu_list = ref([])
const aiList = ref([])
const ai_str = ref('暂无数据')
onMounted(()=>{
    tu_list.value = uni.getStorageSync('img_list')
    let aiList1 = {
    value: {
        messages: []
    }
};
 
aiList1.value = uni.getStorageSync('ai_chat_history') || aiList.value;
aiList.value = aiList1.value.messages
ai_str.value = JSON.stringify(aiList.value[2].content)
        console.log(ai_str.value);
        
        
})


</script>
<style  scoped>
.main_view{
    height: 94vh;
    width: 100%;
    background-color: #1c1526;
    background-size: cover;
    padding: 3vw;
    box-sizing: border-box;
    overflow-y: scroll;
    padding-top: 10vh;
}
.img_and_msg{
    width: 100%;
    display: flex;
}
.ai_img{
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
}
.msg_view{
    display: inline-block;
    padding: 3vw 5vw;
    background-color: rgba(68, 57, 99, 0.6);
    color: white;
    border-radius: 3vw;
    margin-left: 2vw;
}
.user_img{
    width: 20vw;
    height: 40vw;
}
.item_top_jg{
    margin-top: 3vh;
}
.ai_user_img{
    width: 40vw;
    height: 70vw;
}
</style>